<template>
	<el-container>
		<el-aside>
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="itemFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="chartItem" class="menu" node-key="itemId" :data="itemList" :props="itemProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="itemFilterNode" @node-click="itemClick">
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<el-icon style="width: 20px;height: 20px"><component :is="data.icon"/></el-icon>
								<span class="label" style="margin-left: 5px">{{ node.label }}</span>
								<span class="do">
									<el-button-group>
										<el-button icon="el-icon-edit" size="small" @click.stop="itemEdit(data)"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="itemDel(node, data)"></el-button>
									</el-button-group>
								</span>
							</span>
						</template>
					</el-tree>
				</el-main>
				<el-footer style="height:51px;">
					<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addItem">创建分类</el-button>
				</el-footer>
			</el-container>
		</el-aside>
		<el-container>
			<el-main>
				<el-row :gutter="15">
					<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.recordId">
						<el-card class="task task-item" shadow="hover">
							<h2>{{ item.title }}</h2>
							<div style="width: 100%;height:130px;text-align: center;">
								<el-image :src="require('../../../../assets/images/charts/'+item.image)" style="height: 100%;width: 100%;"></el-image>
							</div>
							<div class="bottom">
								<div class="state">
									<el-tag v-if="item.status=='1'" size="small">启用</el-tag>
									<el-tag v-if="item.status!='1'" size="small" type="info">停用</el-tag>
								</div>
								<div class="handler">
									<el-dropdown trigger="click">
										<el-button type="primary" icon="el-icon-more" circle plain></el-button>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>
												<el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
						<el-card class="task task-add" shadow="never" @click="add">
							<el-icon>
								<el-icon-plus/>
							</el-icon>
							<p>添加图表</p>
						</el-card>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
	<item-save-dialog v-if="dialog.itemSave" ref="itemSaveDialog" @success="itemHandleSuccess" @closed="dialog.itemSave=false"></item-save-dialog>
</template>

<script>
import saveDialog from './save'
import itemSaveDialog from './itemSave'
export default {
	name: 'Big Data Chart Manage',
	components: {
		saveDialog,
		itemSaveDialog
	},
	provide() {
		return {
			list: this.list
		}
	},
	data() {
		return {
			showItemloading: true,
			itemList: [],
			itemFilterText: '',
			listApi: null,
			itemProps: {
				value: 'itemId',
				label: 'name'
			},
			dialog: {
				save: false,
				itemSave:false
			},
			list: []
		}
	},
	mounted() {
		this.getAllBigDataChartList("");
		this.getBigDataItemTree();
	},
	methods: {
		//删除树
		itemDel(node, data) {
			this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
				type: 'warning'
			}).then(async() => {
				var res = await this.$API.bigdata.bigDataItem.deleteBigDataItem.post({itemId:data.itemId});
				if(res.code==200)
				{
					this.$refs.dic.remove(data.itemId)
					this.$message.success("操作成功")
				}else
				{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}).catch(() => {

			})
		},
		itemEdit(data){
			this.dialog.itemSave = true
			this.$nextTick(() => {
				var editNode = this.$refs.chartItem.getNode(data.itemId);
				var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.itemId;
				data.parentId = editNodeParentId
				this.$refs.itemSaveDialog.open('edit').setData(data)
			})
		},
		async itemHandleSuccess(data, mode) {
			var res = await this.$API.bigdata.bigDataItem.getBigDataItemTree.get();
			if(res.code==200)
			{
				this.itemList = res.data;
			}
		},
		addItem() {
			this.dialog.itemSave = true
			this.$nextTick(() => {
				this.$refs.itemSaveDialog.open()
			})
		},
		async getBigDataItemTree() {
			var res = await this.$API.bigdata.bigDataItem.getBigDataItemTree.get();
			this.showItemloading = false;
			this.itemList = res.data;
			//获取第一个节点,设置选中 & 加载明细列表
			var firstNode = this.itemList[0];
			if (firstNode) {
				this.$nextTick(() => {
					this.$refs.chartItem.setCurrentKey(firstNode.itemId)
				})
				this.listApiParams = {
					parentId: firstNode.itemId
				}
				this.listApi = this.$API.bigdata.bigDataItem.getBigDataItemTree;
			}
		},
		itemFilterNode(value, data) {
			if (!value) return true;
			var targetText = data.name + data.code;
			return targetText.indexOf(value) !== -1;
		},
		itemClick(data) {
			this.getAllBigDataChartList(data.itemId);
		},
		async getAllBigDataChartList(itemId) {
			var res = await this.$API.bigdata.bigDataChart.getAllBigDataChartList.get({itemId:itemId});
			this.list = res.data;
		},
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		edit(task) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(task)
			})
		},
		async deleteBigDataChart(item) {
			const loading = this.$loading();
			var res = await this.$API.system.sysTasks.delete.post({recordId: item.recordId});
			if (res.code == 200) {
				this.list.splice(this.list.findIndex(item => item.recordId === item.recordId), 1)
				this.$message.success(res.message)
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
			loading.close();
		},
		async del(item) {
			await this.$confirm(`确认删除 ${item.title} 图表吗？`, '提示', {
				type: 'warning',
				confirmButtonText: '删除',
				confirmButtonClass: 'el-button--danger'
			}).then(() => {
				this.deleteBigDataChart(item);
			}).catch(() => {
				//取消
			})
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.list.push(data)
			} else if (mode == 'edit') {
				this.list.filter(item => item.taskId === data.taskId).forEach(item => {
					Object.assign(item, data)
				})
			}
		}
	}
}
</script>

<style scoped>
.task {
	height: 250px;
}

.task-item h2 {
	font-size: 15px;
	color: #3c4a54;
	padding-bottom: 15px;
}

.task-item li {
	list-style-type: none;
	margin-bottom: 10px;
}

.task-item li h4 {
	font-size: 12px;
	font-weight: normal;
	color: #999;
}

.task-item li p {
	margin-top: 5px;
}

.task-item .bottom {
	border-top: 1px solid #EBEEF5;
	text-align: right;
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.task-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	color: #999;
}

.task-add:hover {
	color: #409EFF;
}

.task-add i {
	font-size: 30px;
}

.task-add p {
	font-size: 12px;
	margin-top: 20px;
}

.dark .task-item .bottom {
	border-color: var(--el-border-color-light);
}

.info-title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}


.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
